import { Tabbar, TabbarItem } from 'react-vant'
import { switchTab, getCurrentPages } from '@tarojs/taro'
import './index.css'

const TabBar = () => {
  const pages = getCurrentPages()
  const currentRoute = pages[pages.length - 1]?.route || ''
  const current = currentRoute.endsWith('buy/index') ? 'buy' :
                currentRoute.endsWith('service/index') ? 'service' :
                currentRoute.endsWith('cart/index') ? 'cart' :
                currentRoute.endsWith('mine/index') ? 'mine' : 'home'

  const tabs = [
    { 
      id: 'home',
      title: '首页',
      icon: (
        <svg viewBox="0 0 24 24" width="24" height="24">
          <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="currentColor"/>
        </svg>
      )
    },
    { 
      id: 'buy',
      title: '购买',
      icon: (
        <svg viewBox="0 0 24 24" width="24" height="24">
          <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z" fill="currentColor"/>
        </svg>
      )
    },
    { 
      id: 'service',
      title: '客服',
      icon: (
        <svg viewBox="0 0 24 24" width="24" height="24">
          <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" fill="currentColor"/>
        </svg>
      )
    },
    { 
      id: 'cart',
      title: '购物车',
      icon: (
        <svg viewBox="0 0 24 24" width="24" height="24">
          <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z" fill="currentColor"/>
        </svg>
      )
    },
    { 
      id: 'mine',
      title: '我的',
      icon: (
        <svg viewBox="0 0 24 24" width="24" height="24">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" fill="currentColor"/>
        </svg>
      )
    }
  ]

  const handleTabClick = (tabId: string) => {
    if (tabId === current) return
    
    let url = ''
    switch(tabId) {
      case 'home':
        url = '/user/pages/index/index'
        break
      case 'buy':
        url = '/user/pages/buy/index'
        break
      case 'service':
        url = '/user/pages/service/index'
        break
      case 'cart':
        url = '/user/pages/cart/index'
        break
      case 'mine':
        url = '/user/pages/mine/index'
        break
    }
    switchTab({ url })
  }

  return (
    <Tabbar 
      fixed 
      safeAreaInsetBottom
      value={current}
      onChange={(active) => handleTabClick(active as string)}
    >
      {tabs.map(tab => (
        <TabbarItem
          key={tab.id}
          name={tab.id}
          icon={tab.icon}
        >
          {tab.title}
        </TabbarItem>
      ))}
    </Tabbar>
  )
}

export default TabBar
